<template>
  <header class="header">
    <h3 class="text">
      <span style="position: absolute;top: 10px;left: 40px;font-size: 12px;">{{userNameuser}}</span>
      <p style="position: absolute;top: 30px;left: 40px;font-size: 12px;">参评学生总数：{{number_student}}</p>
      <p>{{ title }}</p>
      <span class="date">{{ date }}&nbsp;&nbsp;&nbsp;&nbsp;{{ week }}&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;<span class="tuichu" @click="$router.push('/login')">退出</span></span>
    </h3>
  </header>
</template>

<script lang="ts">
//@ts-nocheck
import { Component, Vue } from 'vue-property-decorator'
import dayjs from 'dayjs'
import { getnumberPeople } from '@/api'

@Component({
  name: 'Header'
})
export default class Header extends Vue {
  date = ''
  week = ''
  weeks = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
  timerFn: null | number = null
  title = '全国中小学生心理健康监测平台'
  userNameuser = '用户名'
  number_student = 1000000
  async getTitleFn() {
    this.userNameuser = this.$store.state.mechanism_name

    const {
      status,
      data
    } = await getnumberPeople()
    if (status === 200) {
      this.number_student = data.data
    }
  }
  async handleBlur() {
    // await getAndUpdateTitleApi(this.title)
    this.handleToogle()
  }
  mounted() {
    this.timerFn = setInterval(() => {
      const day = dayjs()
      this.date = day.format('YYYY-MM-DD')
      this.week = this.weeks[Number(day.format('d'))]
    }, 1000)
    this.getTitleFn()
  }
  beforeDestroy() {
    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
    clearInterval(this.timerFn!)
    this.timerFn = null
  }
}
</script>
<style lang="scss" scoped>
@import '~@/assets/styles/mixin.scss';

.header {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1920px;
  height: 70px;
  padding-top: 10px;
  font-family: $font-family-medium;
  font-size: 28px;
  font-weight: $font-weight-bigger;
  color: $color-primary-light;
  text-align: center;
  background: url(../../assets/images/header-bg.png) no-repeat center center / contain;
  transform: translateX(-50%);

  .text {
    position: relative;
    width: 100vw;
    height: 100%;
    max-width: 1920px;
    margin: 0 auto;

    .date {
      position: absolute;
      top: 10px;
      right: 40px;
      font-size: 12px;
    }

    .tuichu {
      color:#49abf8;
      cursor:pointer;
    }
  }
}
</style>
